import { FC, useEffect, useRef } from "react"
import {
  AxesHelper, PerspectiveCamera,
  PointLight, Scene, WebGLRenderer,
  AmbientLight, Vector3, Euler, Quaternion,
} from "three"
import {
  DirectionalModel
} from "R/models";
import { OrbitControls } from "three/examples/jsm/Addons.js";
import { GUI } from "dat.gui";
// 椭圆点位置
const lightPosition = new Vector3(60, 100, 10),
  modelPostion = new Vector3(20, 0, 0)

const Page: FC = () => {
  const container = useRef<HTMLCanvasElement>(null);
  // 基本对象
  useEffect(() => {
    const bodyele = document.body;
    const renderer = new WebGLRenderer({ canvas: container.current! }),
      camera = new PerspectiveCamera(90, bodyele.clientWidth / bodyele.clientHeight, 1, 1000),
      scene = new Scene(),
      pointLight = new PointLight(0xffffff, 2),
      axesHelper = new AxesHelper(100);
    renderer.setClearAlpha(.4)
    renderer.setSize(bodyele.clientWidth, bodyele.clientHeight)
    const gui = new GUI()
    camera.position.set(-10, 50, -50)

    // 控制器设置
    const orbitControls = new OrbitControls(camera, renderer.domElement)
    orbitControls.minDistance = 10
    orbitControls.maxDistance = 100

    orbitControls.maxPolarAngle = Math.PI / 2





    // 灯光位置
    pointLight.position.copy(lightPosition)
    pointLight.decay = 0

    scene.add(
      new AmbientLight(0xffffff, 1),
      axesHelper,
      pointLight,
      DirectionalModel,
    )

    DirectionalModel.position.copy(modelPostion)
    // 模型旋转
    const euler = new Euler()
    euler.y = Math.PI / 6
    euler.x = Math.PI / 3
    euler.y = Math.PI / 6
    euler.order = "YXZ"
    DirectionalModel.rotation.copy(euler)

    DirectionalModel.add(new AxesHelper(15))


    function roun() {
      renderer.render(scene, camera)
      requestAnimationFrame(roun)
    }
    roun()
    return () => {
      gui.destroy()
      renderer.dispose()
    }
  }, [])
  return <canvas ref={container}></canvas>
}
export default Page